<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="renderer" content="webkit">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
		<title>index</title>
		<link rel="stylesheet" href="../../source/plugins/layui/css/layui.css" />
		<link rel="stylesheet" href="../../source/plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../../source/plugins/datatables/jquery.dataTables.min.css" />
		<link rel="stylesheet" href="../../source/css/system.css" />
	</head>

	<body>
		<div class="admin-submain">
			<div class="layui-tab layui-tab-brief admin-subtab">
				<ul class="layui-tab-title" id="one-tab">
					<li>订单详情</li>
					<li class="layui-this">发货信息</li>
					<li>收款信息</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<section class="order-topbox">
							<ul>
								<li>
									<div class="order-cardbox">订单号：DH-O-20170421-025345<span class="order-state">备货中</span></div>
								</li>
								<li>
									<div class="order-infobox">
										<span>揽货物流商：上海美智教育</span>
										<span>约定发货时间：2017-4-28  10:10:00</span>
									</div>
								</li>
							</ul>
						</section>
						<section class="admin-list-detail">
							<div class="admin-collapse">
								<div class="admin-colla-item">
									<h2 class="admin-colla-title">
										<i class="fa fa-file-text-o" aria-hidden="true"></i>出库/发货记录
									</h2>
									<div class="admin-colla-content">
										<div style="height: 40px;position: relative;">
											<div class="admin-tab-right">
												<span class="icon-wrapper">
													<button><i class="fa fa-print" aria-hidden="true"></i>打印</button>
													<button><i class="fa fa-share-square-o" aria-hidden="true"></i>导出</button>
													<button id="void-btn"><i class="layui-icon">&#xe640;</i>作废</button>
													<button type="button" class="ant-btn ant-btn-ghost" id="detail-deliverbtn"><span>发 货</span></button>
												</span>
											</div>
										</div>
										<div class="submain-table" style="overflow: visible;">
											<table class="layui-table table-static">
											 	<tr>
											 		<th width="30"></th>
											 		<th width="120">商品图片</th>
											 		<th>商品名称</th>
											 		<th>规格</th>
											 		<th>商品编码</th>
											 		<th>本次出库数</th>
											 	</tr>
											 	<tr>
											 		<td>1</td>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>宁波汤圆，宁波汤圆，宁波汤圆</td>
											 		<td>500g/袋</td>
											 		<td>23521521</td>
											 		<td>50袋</td>
											 	</tr>
											 	<tr>
											 		<td>2</td>
											 		<td><img src="../../source/images/head.jpg" width="100%" class="goods-img img-hover-show"></td>
											 		<td>宁波汤圆，宁波汤圆，宁波汤圆</td>
											 		<td>500g/袋</td>
											 		<td>23521521</td>
											 		<td>50袋</td>
											 	</tr>
											</table>
											<div  class="table-footer-wrapper">
									 			<div class="table-info">
									 				<span>出库信息</span>
									 				<span>出库编号：L-20170429-2001</span>
									 				<span>出库时间：2017-04-29 12：00</span>
									 				<span>出库仓库：宁波站</span>
									 			</div>
										 	</div>
										</div>
									</div>
								</div>
							</div>
						</section>
					</div>
				</div>
				
				<!--发货框-->
				<div>
					<div class="advanced-search-mask" id="advanced-search-mask" onclick="advanced_cancel()"></div>
					<div class="layui-layer layui-layer-dialog advanced-skin layer-anim" id="advanced-box">
						<div class="layui-layer-title">发货信息</div>
						<h3 class="sub-title">如确认已经发货，请填写发货信息：</h3>
						<div class="layui-layer-content" style="overflow: visible;">
							<div class="advanced-search">
								<div class="advanced-box">
									<div class="first-form">
										<form class="layui-form">
											<div class="layui-form-item">
												<label class="layui-form-label">发货日期</label>
												<div class="layui-input-block">
													<input onclick="layui.laydate({elem: this, festival: true})" type="text" name="issuance-data" autocomplete="off" placeholder="请选择发货日期" class="layui-input">
												</div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">物流公司</label>
												    <div class="layui-input-block">
												      <select name="logistics-company">
												        <option value=""></option>
												        <option value="0">顺丰</option>
												        <option value="1">申通</option>
												        <option value="2">圆通</option>
												        <option value="3">天天快递</option>
												        <option value="4">汇通</option>
												      </select>
												    </div>
											</div>
											<div class="layui-form-item">
												<label class="layui-form-label">物流单号</label>
												<div class="layui-input-block">
													<input type="text" name="logistics-number" autocomplete="off" placeholder="请输入物流单号" class="layui-input">
												</div>
											</div>
										</form>
										<div class="layui-form">
											<div class="layui-form-item">
												<label class="layui-form-label">物流备注</label>
												<div class="layui-input-block">
													<textarea name="logistics-mark" placeholder="请物流备注" class="layui-textarea"></textarea>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="layui-layer-btn">
							<a class="layui-layer-btn0" id="advanced-yes">确 定</a>
							<a class="layui-layer-btn1" id="advanced-cancel" onclick="advanced_cancel()">取 消</a>
						</div>
					</div>
				</div>
				
			</div>
		</div>
		
		<script src="../../source/plugins/layui/layui.js"></script>
		<script src="../../source/plugins/datatables/jquery-1.12.4.js"></script>
		<script src="../../source/plugins/datatables/jquery.dataTables.min.js"></script>
		<script src="../../source/plugins/datatables/dataTables.fixedColumns.js"></script>
		<script src="../../source/js/datatables-config.js"></script>
		<script src="../../source/js/system.js"></script>
		<script>
			
			layui.use(['element', 'layer', 'form', 'laydate'], function(){
				
				var element = layui.element(),
					layer = layui.layer;
				$("#detail-deliverbtn").on('click', function() {
					$("#advanced-box, #advanced-search-mask").css("display", "block");
				})

				$("#advanced-yes").on("click", function() {//点击发货，弹出信息框
					var parent = $("#advanced-box");
					var issuance_data = parent.find('[name="issuance-data"]').val();
					var logistics_company = parent.find('[name="logistics-company"]').val();
					var logistics_number = parent.find('[name="logistics-number"]').val();
					var logistics_mark = parent.find('[name="logistics-mark"]').val();
					$.ajax({
						url: options.url,
						data: {
							issuance_data: issuance_data,
							logistics_company: logistics_company,
							logistics_number: logistics_number,
							logistics_mark: logistics_mark
						},
						type: "post",
						dataType: "json",
						beforeSend: function() {
							advanced_cancel();
							layer.load(0);
						},
						success: function(data) {
							//处理事件
							layer.closeAll();
						}
					});
				})
				
				//点击作废，弹出框
				$("#void-btn").on('click', function(){
					var voidhtml = '<div class="content-voidbox"><h3>请确认是否作废？</h3><h3>如确认是否作废，请填写作废原因</h3><textarea name="void-reason"></textarea></div>';
					layer.open({
						type: 1,
						title: '确认作废',
						content: voidhtml,
						btn: ['确定', '取消'],
						shade: 0.08,
						area: ['560px'],
						yes: function(index, layero){
				    		var void_reason = $('textarea[name="void-reason"]').val();
				    		$.ajax({
								url: url,
								data: {
									void_reason: void_reason
								},
								type: "post",
								dataType: "json",
								success: function(data) {
									//处理事件
									layer.close(index);
								}
							});
					  	},
					})
				})
			  	
			})
			
			//清理高级搜索的val值
			function advanced_clear() {
				$("#advanced-box").find('input[type="text"]').val("");
			}

			//关闭高级搜索
			function advanced_cancel() {
				$("#advanced-box, #advanced-search-mask").css("display", "none");
			}
		</script>
	</body>

</html>